<template>
  <div class="app-page">
    <el-table-form ref="form" :model="query">

      <el-form-item label="仓库名称:" prop="storeId">
        <el-select v-model="query.storeId" :clearable="true" filterable placeholder="请选择">
          <el-option
            v-for="item in storeMap"
            :key="item.storeId"
            :label="item.storeName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="规格型号:" prop="specCode">
        <el-select v-model="query.specCode" :clearable="true" filterable placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.specCode"
            :label="item.specName"
            :value="item.specCode"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="状态:" prop="gdStatus">
        <el-select v-model="query.gdStatus" :clearable="true" filterable placeholder="请选择">
          <el-option label="重瓶" :value="1" />
          <el-option label="空瓶" :value="2" />
        </el-select>
      </el-form-item>

      <template v-slot:btns>
        <el-button
          v-permission="[7040101, 1]"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
      </template>
    </el-table-form>

    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      v-loading="$loadingPlugin.fetchData"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      :immediate-fetch="true"
      @fetch="fetchData"
    />
    <inAndOutDetail ref="inAndOutDetail" />
    <inventoryDetail ref="inventoryDetail" />
  </div>

</template>

<script>
  import { invenQuerySpec, selectOrgSNNoAndReType, storeStationQuery } from '@/api'
  import inAndOutDetail from './inAndOutDetail'
  import inventoryDetail from './inventoryDetail'

  export default {
    name: 'supplyStations',
    components: { inAndOutDetail, inventoryDetail },
    props: {
      goodTList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        query: {
          storeId: null,
          gdStatus: undefined,
          specCode: undefined
        },
        storeMap: [],
        typeList: [],
        tableData: {
          total: 0,
          column: [
            {
              type: 'index'
            },
            {
              prop: 'storeName',
              align: 'center',
              label: '仓库名称',
              minWidth: 160
            },
            {
              prop: 'goodsSpec',
              align: 'center',
              label: '规格型号'
            },
            {
              prop: 'gdStatus',
              align: 'center',
              label: '气瓶状态',
              formatter: (row) => {
                return row.gdStatus ? row.gdStatus === 1 ? '重瓶' : row.gdStatus === 2 ? '空瓶' : '' : ''
              }
            },
            {
              prop: 'carryCount',
              align: 'center',
              label: '期初库存'
            },
            {
              prop: 'inCount',
              align: 'center',
              label: '入库',
              render: (h, { row, $index }) => (
                <div>
                  { row.inCount && <el-link underline={false} size='mini' onClick={() => this.showSpecCount(row, 2)}>{row.inCount}</el-link>}
                </div>
                )
            },
            {
              prop: 'outCount',
              align: 'center',
              label: '出库',
              render: (h, { row, $index }) => (
                <div>
                  { row.outCount && <el-link underline={false} size='mini' onClick={() => this.showSpecCount(row, 1)}>{row.outCount}</el-link>}
                </div>
                )
            },
            {
              prop: 'lessCount',
              align: 'center',
              label: '盘盈/亏',
              render: (h, { row, $index }) => (
                <div>
                  { row.lessCount !== 0 ? <el-link type='danger' underline={false} size='mini' onClick={() => this.showSpecCount(row, 3)}>{row.lessCount > 0 ? '+' + row.lessCount : row.lessCount}</el-link>
                  : row.lessCount}
                </div>
                )
            },
            {
              prop: 'totalCount',
              align: 'center',
              label: '当前库存',
              renderHeader: (h, { row }) => (
                <div class='Header-tip'>
                <span>当前库存</span>
               <el-tooltip
                  effect='light'
                  content='当前库存=期初库存+入库-出库+盘盈/亏'
                  placement='top'
                >
                 <i class='el-icon-question'></i>
              </el-tooltip>
              </div>
            )
            }
            // {
            //   prop: '',
            //   align: 'center',
            //   label: '少还瓶',
            //   render: (h, { row, $index }) => (
            //     <div>
            //       { row.codeCountStr && <el-link underline={false} size='mini' onClick={() => this.showSpecCount(row)}>{row.codeCountStr}</el-link>}
            //     </div>
            //     )
            // }
          ],
          data: []
        }
      }
    },
    watch: {

    },
    async created() {
      this.getleftStoreMap()
      this.getTypeList()
    },
    methods: {
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          params: {
            ...this.query,
            reType: 1
          }
        }
        const res = await storeStationQuery(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      async getleftStoreMap() {
        const res = await selectOrgSNNoAndReType({
          currentPage: 1,
          pageSize: 9999,
          reType: 1
        })
        this.storeMap = res.data
      },
      async getTypeList() {
        const res = await invenQuerySpec({})
        this.typeList = res.data
      },

      search() {
        this.$refs.lbTable.fetch({})
      },
      showSpecCount(row, type) {
        if (type) {
          if (type === 3) {
            this.$refs.inventoryDetail.open(row)
          } else {
            this.$refs.inAndOutDetail.open(row, type)
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 0;
}
.merge-item {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
.btn-group {
  display: flex;
  justify-content: space-between;
}

</style>
